import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h, ref } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { updateGoodState } from '/@/api/goods';
import { Tag } from 'ant-design-vue';
import { DescItem } from '/@/components/Description';

export const columns: BasicColumn[] = [
  {
    title: '商品ID',
    dataIndex: 'goods_id',
    width: 100,
  },
  {
    title: '商品图片',
    dataIndex: 'goods_image',
    slots: { title: 'customImg', customRender: 'img' },
    width: 100,
  },
  {
    title: '商品名称',
    dataIndex: 'goods_name',
    align: 'left',
    width: 200,
  },
  {
    title: '商品价格',
    dataIndex: 'goods_price_min',
    width: 100,
  },
  {
    title: '总销量',
    dataIndex: 'goods_sales',
    width: 100,
  },
  {
    title: '库存总量',
    dataIndex: 'stock_total',
    width: 100,
  },

  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    slots: { title: 'customStatus', customRender: 'status' },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Tag, {
        color: record.status === 10 ? 'green' : 'red',
        style: ' cursor: pointer;',
        onClick() {
          record.pendingStatus = true;
          const newStatus = record.status !== 10;
          const { createMessage } = useMessage();
          updateGoodState({
            goodsIds: [record.goods_id],
            state: newStatus
          }).then(() => {
            record.status = newStatus ? 10 : 0;
            createMessage.success(`修改状态成功`);
          })
            .catch(() => {
              createMessage.error('修改状态失败');
            })
            .finally(() => {
              record.pendingStatus = false;
            });
        },
      }, () => record.status === 10 ? '上架' : '下架');
    },
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 80,
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 150,
  },
];
// 表格搜索框
export const searchFormSchema: FormSchema[] = [
  {
    field: 'goodsName',
    label: '商品名称',
    component: 'Input',
    colProps: { span: 5 },
  },
  {
    field: 'goodsNo',
    label: '商品编码',
    component: 'Input',
    colProps: { span: 5 },
  },
  {
    field: 'status',
    label: '商品分类',
    component: 'Select',
    componentProps: {
      options: [
        { label: '上 架', value: '0' },
        { label: '下 架', value: '1' },
      ],
    },
    colProps: { span: 5 },
  }
];





